import React, {useContext, useEffect, useState} from "react";
import {
    Dimensions,
    TouchableOpacity,
    View,
    Text,
    ActivityIndicator,
    ScrollView,
    FlatList,
    Modal
} from "react-native";
import {Avatar} from "react-native-elements/dist/avatar/Avatar";
import {Icon} from "react-native-elements/dist/icons/Icon";
import Clipboard from "@react-native-community/clipboard";
import Toast from "react-native-simple-toast";
import LocaleContext from "../libs/locale";
import {Divider} from "react-native-elements/dist/divider/Divider";
import NFT from "../assets/Assets/NFT.png";
import NFT_NULL from "../assets/Assets/NFT_NULL.png";
import logo from '../assets/logo.png';
import {Image} from "react-native-elements/dist/image/Image";
import {Card} from "react-native-elements/dist/card/Card";
import {NFTView_IDSize, NFTView_TitleSize, sendNFT} from "../libs/NFTView";
import WalletContext from "../libs/wallet";
import {ImageViewer} from "react-native-image-zoom-viewer";
import {DownloadImage} from "../libs/utils";
import {Button} from "react-native-elements";

const {width,height,scale} = Dimensions.get("window");

const NFTDetail = ({navigation,route}:any) => {
    const locale:any = useContext(LocaleContext);
    const wallet: any = useContext(WalletContext);
    const [NFT_ID, setNFT_ID] = useState(route?.params?.item.id);
    const [NFT_Item, setNFT_Item] = useState(route?.params?.item.detail);
    const [NFT_Contract, setNFT_Contract] = useState(route?.params?.contract);
    const [NFT_Height, setNFT_Height] = useState(0);
    const [NFT_Width, setNFT_Width] = useState(0);
    const [showMore, setShowMore] = useState(false);
    const [imageVisible,setImageVisible] = useState(false)
    useEffect(()=>{
        console.log(NFT_ID)
        navigation.setOptions({title: locale._("NFT_Detail")})
        setImgHeight(NFT_Item.image);
    },[])
    const setImgHeight = (url:any) => {
        let heightTemp = (width-30);
        let widthTemp = width - 30;
        console.log(url)
        Image.getSize(url,(ImgWidth,ImgHeight)=>{
            console.log(ImgWidth)
            console.log(ImgHeight)
            let wRate = ImgWidth/widthTemp;
            let hRate = ImgHeight/heightTemp;
            if(hRate > wRate)
            {
                if(ImgHeight > heightTemp)
                {
                    heightTemp =  heightTemp;
                    widthTemp = ImgWidth/hRate;
                }
                else
                {
                    heightTemp =  ImgHeight;
                    widthTemp = ImgWidth;
                }
            }
            else
            {
                if(ImgWidth > widthTemp)
                {
                    heightTemp =  ImgHeight/wRate;
                    widthTemp = widthTemp;
                }
                else
                {
                    heightTemp =  ImgHeight;
                    widthTemp = ImgWidth;
                }
            }
            setNFT_Height(heightTemp);
            setNFT_Width(widthTemp);
        })
    }
    return (
        <View style={{flex:1}}>
            <View style={{padding:15,paddingTop:10,backgroundColor:"rgb(246, 246, 246)"}}>
                <ScrollView contentContainerStyle={{alignItems:"center",}}>
                    <View style={{flexDirection:"column",width: (width-30),height:NFT_Height || (width-30),backgroundColor:"#fff",alignItems:"center",justifyContent:"center"}}>
                        <Image
                            onPress={()=>{setImageVisible(true)}}
                            source={NFT_Item.image!=undefined?{uri:NFT_Item.image}:NFT_NULL}
                            style={{ width: NFT_Width || (width-30), height: NFT_Height || (width-30) }}
                            PlaceholderContent={<Image
                                style={{width:width-30,height:width-30}}
                                source={NFT_NULL}/>}
                        />
                    </View>
                    <View style={{backgroundColor:"#fff",padding:15,width:width-30,marginTop:10,marginBottom:10}}>
                        <Text style={{fontSize:NFTView_TitleSize,lineHeight:22}}>{NFT_Item.name || locale._("NFT_Detail_NoName")}</Text>
                        <Text style={{fontSize:NFTView_IDSize,color:"grey",lineHeight:16,marginBottom:2}}>#{NFT_ID}</Text>
                    </View>
                    <View style={{backgroundColor:"#fff",padding:15,width:width-30}}>
                        <Text style={{fontWeight:"normal",fontSize:NFTView_TitleSize,marginBottom:10}}>{locale._("NFT_Detail_Profile")}</Text>
                        {
                            NFT_Item.description && NFT_Item.description.length>50 && !showMore?
                                <TouchableOpacity onPress={()=>{
                                    let res = showMore;
                                    setShowMore(!res);
                                }} activeOpacity={1}>
                                    <View style={{flexDirection:"row"}}>
                                        <Text style={{fontWeight:"normal",fontSize:NFTView_IDSize,color:"grey"}}>
                                            {NFT_Item.description.slice(0,70)}...<Text style={{fontWeight:"normal",fontSize:width*0.035,color:"blue"}}>更多</Text>
                                        </Text>
                                    </View>
                                </TouchableOpacity>
                                :
                                <TouchableOpacity onPress={()=>{
                                    let res = showMore;
                                    setShowMore(!res);
                                }} activeOpacity={1}>
                                    <Text style={{fontWeight:"normal",fontSize:NFTView_IDSize,color:"grey"}}>
                                        {NFT_Item.description || locale._("NFT_Detail_NOProfile")}
                                    </Text>
                                </TouchableOpacity>
                        }
                    </View>
                </ScrollView>
            </View>
            <View style={{flex: 1, backgroundColor: "rgb(246, 246, 246)"}}/>
            <View style={{width:width,flexDirection:"column",padding:15,alignItems:"center",backgroundColor:"rgb(246, 246, 246)"}}>
                <Button
                    type='outline'
                    title={locale._("NFT_Detail_SendFile")}
                    onPress={()=>{navigation.push("NFTSend",{item:NFT_Item,id:NFT_ID,contract:NFT_Contract});}}
                    // loading={sending}
                    // disabled={sending}
                    loadingProps={{color: '#7460E3FF'}}
                    buttonStyle={{borderColor: '#7367E3', backgroundColor: '#7367E3'}}
                    titleStyle={{color: 'white'}}
                />
            </View>
            <Modal visible={imageVisible} transparent={true}>
                <ImageViewer menuContext={{ saveToLocal: locale._("NFT_Detail_SaveImg"), cancel: locale._("NFT_Detail_Cancle") }} enableSwipeDown onSave={DownloadImage} onSwipeDown={() => setImageVisible(false)} imageUrls={[{url:NFT_Item.image!=undefined?NFT_Item.image:NFT_NULL}]} />
            </Modal>

        </View>
    )
};

export default NFTDetail;


